<template>
  <el-dialog title="生成房号" class="createdRoom" width="810px" :visible.sync="isDial">
    <div class="row">
      <p class="tit">选择生成内容</p>
      
      <el-table :data="tableData" border style="width: 100%" show-header size="mini" >
        <el-table-column prop="unit" label="单元" width="380">
            <template slot-scope="scope">
              <el-checkbox :indeterminate="isUnit" class="allChange" v-model="unitAll" @change="unitAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="checkedUnit" @change="unitChange">
                <el-checkbox v-for="city in unit" :label="city" :key="city.id">{{city.fullName}}</el-checkbox>
              </el-checkbox-group>
            </template>
        </el-table-column>
        <el-table-column prop="layer" label="楼层">
          <template slot-scope="scope">
              <el-checkbox :indeterminate="isLayer" class="allChange" v-model="layerAll" @change="layerAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="checkedLayer" @change="layerChange">
                <el-checkbox v-for="city in layer" :label="city" :key="city">{{city}}层</el-checkbox>
              </el-checkbox-group>
            </template>
        </el-table-column>
      </el-table>
      <!-- <p class="tit">房号生成规则</p>
      <p style="l">
        <el-radio v-model="radio" label="1">1、楼层+数字房号规则，例如：601、1603</el-radio>
      </p>
      <p>
        <el-radio v-model="radio" label="2">2、楼层+字母房号规则，例如：6A、16C</el-radio>
      </p> -->
    </div>
    <p class="tit">填写房源基本信息</p>
    <el-table :data="tableData1" border style="width: 100%" show-header size="mini" >
        <el-table-column prop="num" label="序号" width="50"></el-table-column>
        <el-table-column prop="apartment" label="户型">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.apartment[0]" style="width:60px">
              <el-option :label="item" v-for="item in 9" :value="item"></el-option>
            </el-select> 室
            <el-select size="mini" v-model="scope.row.apartment[1]" style="width:60px">
              <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
            </el-select> 厅
            <el-select size="mini" v-model="scope.row.apartment[2]" style="width:60px">
              <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
            </el-select> 卫
            <el-select size="mini" v-model="scope.row.apartment[3]" style="width:60px">
              <el-option :label="item-1" v-for="(item,index) in 10" :value="item-1"></el-option>
            </el-select> 阳 
          </template>
        </el-table-column>
        <el-table-column prop="type" label="房屋类型" width="100">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.type" style="width:80px">
              <el-option :label="item.label" :value="item.label" v-for="item in options"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="orientation" label="朝向" width="100">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.orientation" style="width:80px">
              <el-option label="东" value="东"></el-option>
              <el-option label="南" value="南"></el-option>
              <el-option label="西" value="西"></el-option>
              <el-option label="北" value="北"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="measure" label="建筑面积" width="150">
          <template slot-scope="scope">
            <el-input style="width:100px" size="mini" v-model="scope.row.measure" autocomplete="off"></el-input>
          </template>
        </el-table-column>
      </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="generateRoom">生 成</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../../assets/request.js";
import Vue from 'vue';
export default {
  data() {
    return {
      radio: "1",
      unit:[],
      checkedUnit: [],
      unitAll: true,
      isUnit: false,
      layer:[],
      checkedLayer: [],
      layerAll: true,
      options: this.$store.state.options,
      isLayer: false,
      tableData:[
          {
              unit: [],
              layer: [],
          }
      ],
      tableData1:[
        {
          num:'1',  //序号
          measure:'100', //面积
          type:'平层',     //房屋类型
          orientation:'南', //朝向
          apartment1:'',
          apartment:['1','1','1','1'],  //户型
        }
      ],
      isDial:false,
      housesId:''
    };
  },
  created(){
      let that=this
      this.$root.$on("createdRoo", (data,housesId) => {
        let unitId=[]
        let names=""
        console.log(data)
        for(let i=0,len=data.length;i<len;i++){
          names+=data[i].id+'-'
        }
        names=names.substr(0,names.length-1);
        let obj={
          housesId:housesId,
          ids:names
        }
        console.log(obj)
        that.selectList(obj)
        that.housesId=housesId
        that.isDial = true;
      });
  },
  methods:{
    unitAllChange(val){
      this.checkedUnit = val ? this.unit : [];
      this.isUnit = false;
    },
    layerAllChange(val){
        this.checkedLayer = val ? this.layer : [];
        this.isLayer = false;
    },
     unitChange(value) {
        let checkedCount = value.length;
        this.unitAll = checkedCount === this.unit.length;
        this.isUnit = checkedCount > 0 && checkedCount < this.unit.length;
      },
      layerChange(value){
        let checkedCount = value.length;
        this.layerAll = checkedCount === this.layer.length;
        this.isLayer = checkedCount > 0 && checkedCount < this.layer.length;
      },
      selectList(obj){ //楼层等基础信息查询
        let url = "houses/unit/ids";
        let that = this; //解决this指向问题
        request.ajaxGet({
        url,
        that,
        params: obj,
        fn(res) {
          if(res){
            let arr=[]
            for(let i=1;i<=res.totalTier;i++){
              arr.push(i)
            }
            let arr1=[]
            for(let i=1;i<=res.housesType;i++){
              let obj={
                num:i,  //序号
                measure:'', //面积
                type:'平层',     //房屋类型
                orientation:'南', //朝向
                apartment1:'',
                apartment:['1','1','1','1'],  //户型
              }
              arr1.push(obj)
            }
            console.log(res)
            that.layer=that.checkedLayer=arr
            that.tableData1=arr1
            that.unit=that.checkedUnit=res.ids
          }
        }
        })
      },
      generateRoom(){ //生成房号
        let url='houses/number/list'
        let that=this
        let arr=[]
        console.log(that.checkedUnit)
        let reg = /^-?\d+$/
        for(let i=0,len=that.tableData1.length;i<len;i++){
          let obj={}
          obj.orientation=that.tableData1[i].orientation
          obj.houseType=that.tableData1[i].apartment[0]+'-'+that.tableData1[i].apartment[1]+'-'+that.tableData1[i].apartment[2]+'-'+that.tableData1[i].apartment[3]
          obj.houseClass=that.tableData1[i].type
          console.log(that.tableData1[i].type)
          if(!reg.test(that.tableData1[i].measure)){ //判断面积是否是  整数  为编辑订单考虑
             this.$message({
              type: "info",
              message: "面积只能是整数"
            });
            return
          }
          obj.builtArea=that.tableData1[i].measure
          arr.push(obj)
        }
        let ids=''
        if(that.checkedUnit){
          for(let j=0,len=that.checkedUnit.length;j<len;j++){
            ids+=that.checkedUnit[j].id+'-'
          }
          ids=ids.substr(0,ids.length-1);
        }
        let totalTier=''
        if(that.checkedLayer){
          totalTier=that.checkedLayer.join('-')
        }
        let params={
          housesId:that.housesId,
          numberType:1,
          housesMsgList:arr,
          ids,
          totalTier
        }
        console.log(params)
        this.$confirm('已生成的房号会跳过，其它房号将继续生成。', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
        .then(() => {
          request.ajaxPost({
            url,
            that,
            params,
            fn(res) {
              that.isDial = false;
              that.$root.$emit("pedestalList")
            }
          });
        })
        .catch(() => {
            this.$message({
                type: "info",
                message: "已取消生成"
            });
        });
      }
  }
};
</script>
<style lang="less" scoped>
.createdRoom{
    .tit{
        font-size: 14px;
        font-weight: 700;
        color: #000;
        line-height: 50px !important;
    }
    .row{
        width: 100%;
        margin-top: -30px !important;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
        p{
            line-height: 36px;
        }
    }
    .el-checkbox{
      margin-right: 30px;
      margin-left: 0px !important;
    }
}
</style>


